<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例1</title>
    <!-- 
      总结:
        一、
            块元素
            display:block;
            行内元素
            display:inline;
            行块元素 
            display:inline-block;

        二、文本水平垂直居中
             text-align: center;
             line-height: 值等于height;
        三、选择器  
             伪类选择器


    -->
    <style>
        p {
            background-color: #aaaacc;
            display: inline-block;
            width: 30px;
            height: 30px;
            color: blue;
            /* 文本水平垂直居中 */
            text-align: center;
            line-height: 30px;

            /* 圆角 */
            border-radius: 8px;
        }

        /* 选中第四个元素背景设置为红色 */
        p:nth-child(4) {
            background-color: red;
        }

        /* #p4{
            background-color: blueviolet;
        } */

        /* 
          li -> 行块元素
        */
        ul{padding: 0;margin: 0;}
        li{
            background-color: #aaaacc;
            display: inline-block;
            width: 30px;
            height: 30px;

            /* 水平垂直居中 */
            text-align: center;
            line-height: 30px;

            border-radius: 8px;
            color: blue;

            text-decoration: underline;
        }

        li:nth-child(4){
            background: red;
        }
        a {
            background-color: #aaaacc;
            display: inline-block;
            width: 30px;
            height: 30px;
            color: blue;
            text-align: center;
            line-height: 30px;
            border-radius: 8px;

            text-decoration: none;
        }
        a:nth-child(4) {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="g-container">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>


    <div class="g-wrapper">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
    </div>
</body>

</html>